<template>
  <div>
    <span
      v-if="filelistLen !== 0"
      class="ids-Justify"
      style="cursor: pointer"
      @click="file">
      <img
        src="@/components/Universal/PreviewUploadBtn/LookFile/img/文件.png" />
      <span style="color: #df2b2c; line-height: 15px">({{ filelistLen }})</span>
    </span>
    <span v-if="filelistLen === 0" @click="outFile">
      <img
        src="@/components/Universal/PreviewUploadBtn/LookFile/img/暂无文件.png" />
    </span>

    <LookFile v-if="fileBor" v-model="fileBor" :fileList="fileList" />
  </div>
</template>

<script>
import LookFile from "./lookFileView.vue"
export default {
  components: {
    LookFile,
  },
  props: {
    value: {
      type: Array,
    },
  },

  data() {
    return {
      fileList: [],
      filelistLen: 0,
      fileBor: false,
    }
  },

  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(val) {
        this.fileList = val
        this.filelistLen = this.fileList.length
      },
    },
  },

  methods: {
    file() {
      this.fileBor = true
    },
    outFile() {
      this.$message.warning("暂无文件！")
    },
  },
}
</script>

<style>
.ids-Justify {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
</style>
